<template>
  <div class="divBox">
    <div class="selCard">
      <el-form :model="tableFrom" ref="searchForm" size="small" label-width="100px" :inline="true"
        @submit.native.prevent>
        <el-form-item label="搜索：" prop="search_name">
          <el-input v-model="tableFrom.search_name" @keyup.enter.native="searchHandle()" placeholder="请输入姓名/手机号/行业名称"
            class="selWidth" clearable size="small" />
        </el-form-item>
        <el-form-item label="用户状态：" prop="mer_status">
          <el-select v-model="tableFrom.mer_status" clearable filterable placeholder="请选择用户状态" class="selWidth"
            @change="searchHandle()">
            <el-option v-for="item in statusSelectList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态：" prop="examine_status">
          <el-select v-model="tableFrom.examine_status" clearable filterable placeholder="请选择审核状态" class="selWidth"
            @change="searchHandle()">
            <el-option v-for="item in examineSelectList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="searchHandle()">搜索</el-button>
          <el-button size="small" @click="searchReset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card class="mt14">
      <el-table header-align="center" v-loading="listLoading" :data="tableData.data" size="small" highlight-current-row>
        <el-table-column prop="staff_id" label="ID" min-width="60" />
        <el-table-column prop="industry_name" label="行业名称" min-width="130" />
        <el-table-column label="头像" min-width="120" prop="avatar">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image style="width: 36px; height: 36px" :src="scope.row.avatar"
                :preview-src-list="[scope.row.avatar]" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="130" />
        <el-table-column prop="phone" label="手机号" min-width="130" />
        <el-table-column prop="cost_price" label="服务价格" min-width="130" />
        <el-table-column prop="mer_status" label="账号状态" min-width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mer_status" :active-value="1" :inactive-value="0" active-text="启用"
              inactive-text="禁用" @change="onchangeIsShow(scope.row,scope.$index)" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" min-width="100">
          <template slot-scope="scope">
           <el-tag size="mini" type="success" v-if="scope.row.is_examine==1">
             {{examineSelectList[scope.row.is_examine].name}}
           </el-tag>
           <el-tag type="danger" v-else-if="scope.row.is_examine==2"> {{examineSelectList[scope.row.is_examine].name}}</el-tag>

           <el-tag size="mini" v-else>
             {{examineSelectList[scope.row.is_examine].name}}
           </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="examine_time" label="审核时间" min-width="150" />
        <el-table-column prop="create_time" label="创建时间" min-width="150" />
        <el-table-column label="操作" min-width="130" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onDetail(scope.row.staff_id,scope.row.name)">详情</el-button>
            <el-popover placement="top" width="260" trigger="click">
              <el-form :model="examineFrom" ref="popoverForm" size="small" :inline="true" @submit.native.prevent>
                <el-form-item label="说明:" prop="examine_remark">
                  <el-input v-model="examineFrom.examine_remark" type="textarea" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item style="width: 60%;margin: 0 auto;display: block;">
                  <el-button @click="handleExamine(scope.row.staff_id,2,scope.$index)" size="small">不通过</el-button>
                  <el-button type="primary" size="small"
                    @click="handleExamine(scope.row.staff_id,1,scope.$index)">通过</el-button>
                </el-form-item>
              </el-form>
              <el-button slot="reference" v-if='scope.row.examine_status!==1' type="text" size="small">审核</el-button>
            </el-popover>
            <el-button type="text" size="small" @click="handleDelete(scope.row.staff_id, scope.$index)">解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination background :page-size="tableData.limit" :current-page="tableData.page"
          layout="total, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
    <staff-merchant-detail ref="staffMerchantDetail" :examineList="examineSelectList" :statusList="statusSelectList"/>

  </div>
</template>

<script>
  import {
    staffMerchantList,
    staffMerchantDelete,
    updateStaffMerchantExamine,
    updateStaffMerchantStatus
  } from '@/api/reservation'
  import {
    roterPre
  } from '@/settings'
  import StaffMerchantDetail from './detail.vue';
  export default {
    name: 'ReservationMerchant',
    components: {
      StaffMerchantDetail
    },
    data() {
      return {
        roterPre,
        statusSelectList: [{
          name: '禁用',
          value: 0
        }, {
          name: '启用',
          value: 1
        }],
        examineSelectList: [{
          name: '未审核',
          value: 0
        }, {
          name: '已通过',
          value: 1
        }, {
          name: '未通过',
          value: 2
        }],
        tableFrom: {
          page: 1,
          limit: 20,
        },
        examineFrom: {},
        tableData: {
          data: [],
          total: 0
        },
        listLoading: true
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      onDetail(id, name) {
        let _this = this;
        _this.$refs['staffMerchantDetail'].getStaffMerchantDetail(id, name);
      },
      onchangeIsShow(row, $index) {

        updateStaffMerchantStatus(row.staff_id, row.mer_status).then(({
          message
        }) => {
          this.$message.success(message)
          this.tableData.data[$index].mer_status = row.mer_status
        }).catch(({
          message
        }) => {
          this.$message.error(message)
        })
      },
      handleExamine(id, examine_status, $index) {
        this.$modalSure(`是否审核${examine_status==1?'通过':'不通过'}`).then(() => {
          this.examineFrom.examine_status = examine_status
          updateStaffMerchantExamine(id, this.examineFrom).then(({
            message
          }) => {
            this.tableData.data[$index].examine_status = examine_status
            this.$refs.popoverForm.resetFields()
            this.$message.success(message)
          }).catch(({
            message
          }) => {
            this.$message.error(message)
          })
        })
      },
      handleDelete(id, idx) {
        this.$modalSure('需要解绑吗').then(() => {
          staffMerchantDelete(id).then(({
            message
          }) => {
            this.$message.success(message)
            this.getList()
          }).catch(({
            message
          }) => {
            this.$message.error(message)
          })
        })
      },
      searchHandle() {
        this.tableFrom.page = 1
        this.getList()
      },

      /**重置 */
      searchReset() {
        this.$refs.searchForm.resetFields()
        this.tableFrom.page = 1
        this.getList()
      },
      pageChange(page) {
        this.tableFrom.page = page
        this.getList()
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        this.getList()
      },
      getList() {
        this.listLoading = true
        staffMerchantList(this.tableFrom).then(res => {
          this.tableData.data = res.data.list
          this.tableData.total = res.data.count
          this.listLoading = false
        }).catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
        })
      },

    }
  }
</script>

<style scoped lang="scss">
  .selWidth {
    width: 200px;
  }
  ::v-deep .el-table__fixed {
    height: 100% !important;

  }

  ::v-deep .el-table__fixed-right {
    height: 100% !important;

  }
</style>
